<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node 对象</title>

  <style>
    div {
      border: 1px solid red;
    }

    #div1 {
      width: 200px;
      height: 200px;
    }

    #div2 {
      width: 100px;
      height: 100px;
    }

    #div3 {
      width: 100px;
      height: 100px;
      border: 1px solid blue;
    }
  </style>
</head>
<body>

<div id="div1">
  <div id="div2">div2</div>
  div1
</div>
<a id="del" href="javascript:void(0);">删除子节点</a>
<a id="add" href="javascript:void(0);">添加子节点</a>
<!--<input id="del" type="button" value="删除子节点">-->

<script>

  var del = document.getElementById("del");
  del.onclick = function() {
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    div1.removeChild(div2);
  }

  var add = document.getElementById("add");
  add.onclick = function() {
    var div1 = document.getElementById("div1");
    // 创建 div3
    var div3 = document.createElement("div");
    div3.setAttribute("id", "div3");
    // 给 div1 添加子节点
    div1.appendChild(div3);
  }

  /*
    1、超链接可以被点击：样式
    2、点击后跳转到 href 指定的 url

    需求：保留1功能，去掉2功能
    实现：href = "javascript:void(0);";
  */


  // 返回父节点
  var div2 = document.getElementById("div2");
  var div1 = div2.parentNode;
  alert(div1);

</script>

</body>
</html>